<template>
    <div class="container-view">
        <h1>博客列表</h1>
        <a-table :columns="columns" :dataSource="datas" :loading="loading" :pagination="false">
            <a slot="titles" slot-scope="text" href="javascript:;">{{text}}</a>
            <span slot="customTitle">
                <a-icon type="smile-o" /> Title</span>
            <span slot="likesCount" slot-scope="likesCount">{{likesCount}}</span>
            <span slot="tags" slot-scope="tags">
                <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
            </span>
            <span slot="action" slot-scope="text, record" >
                <!--slot-scope="text, record" text,record 是一列的数据 -->
                <a href="javascript:;" @click="onEdit(record)">Edit</a>
                <a-divider type="vertical" />
                <a-popconfirm
                    title="Sure to delete?"
                    @confirm="() => onDelete(record.key)">
                    <a href="javascript:;">Delete</a>
                </a-popconfirm>
            </span>
        </a-table>
        <div style="text-align:right;padding-top:10px">
            <a-pagination v-model="nowpage" :total="total"  @change="pageChange"/>
        </div>
    </div>
</template>
<script>
    import globalMixin from '@/mixins/global.js'
    import {
        getAllBlogs,deleteBlog,getBlogById
    } from '@/api/blog'
    const columns = [{
        dataIndex: 'titles',
        key: 'titles',
        slots: {
            title: 'customTitle'
        },
        scopedSlots: {
            customRender: 'titles'
        },
    }, {
        title: '观看数',
        dataIndex: 'views',
        key: 'views',
    }, {
        title: '点赞数量',
        dataIndex: 'likes',
        key: 'likes',
        scopedSlots: {
            customRender: 'likesCount'
        },
    },{
        title: '发布时间',
        dataIndex: 'address',
        key: 'address',
    }, {
        title: '分类',
        key: 'tags',
        dataIndex: 'tags',
        scopedSlots: {
            customRender: 'tags'
        },
    }, {
        title: 'Action',
        key: 'action',
        scopedSlots: {
            customRender: 'action'
        },
    }];

    export default {
        mixins:[globalMixin],
        data() {
            return {
                columns,
                datas:[],
                nowpage:1,
                total:0,
                pagesize:10
            }
        },
        methods: {
            init() {
                this.loading = true
                getAllBlogs({
                    nowpage:this.nowpage,
                    pagesize:this.pagesize
                }).then(res => {
                    this.loading = false
                    this.total = res.count
                    this.datas = res.blogs.map(blog =>{
                        return {
                            key: blog._id,
                            titles: blog.title,
                            views: blog.views,
                            likes:blog.likes,
                            address: blog.date,
                            tags: [blog.classify],
                        }
                    })
                }).catch(err=>{
                     this.loading = false
                })
            },
            pageChange(page,size){
                this.nowpage = page

                this.init()
            },
            onDelete(id){            
                deleteBlog(id).then(res=>{
                    this.$message.success(res.msg)
                    this.init()
                })
            },
            onEdit(row){ 
                this.$router.push({path:'/blog/create',query:{id:row.key}})
            }         
        },
        mounted() {
            this.init()
        }
    }
</script>

<style scoped>

</style>